<template>
	<view class="personal-center">
		<view class="header">
			<image
				class="bg-image"
				mode="aspectFill"
				:style="{ transform: `scale(${bgImageScale})` }"
				:src="userInfoDatas.profileBackground"
			></image>
			<view class="tools">
				<!-- 返回和设置 -->
				<i
					class="certishare-icon"
					@click="back"
				>
					<span>&#xe602;</span>
				</i>
				<i class="certishare-icon">
					<span @click="toSeeting">&#xe8b7;</span>
				</i>
			</view>
			<view class="userdata">
				<view class="avatar">
					<u-avatar
						:size="80"
						:src="userInfoDatas.avatar"
					></u-avatar>
				</view>
				<view class="name">
					<span>{{ userInfo.username }}</span>
				</view>
				<view class="signature">
					<span>{{ userInfo.personSignature }}~</span>
				</view>
			</view>
			<view class="space-top">
				<view class="space-top-statistics">
					<view class="statistics fans">
						<span>{{ userInfoDatas.followersCount }}</span>
						<span class="text">粉丝</span>
					</view>
					<view
						class="statistics follows"
						@click="JumpToFollow"
					>
						<span>{{ followedNum }}</span>
						<span class="text">关注</span>
					</view>
					<view class="statistics fans">
						<span>{{ userInfoDatas.totalLikes }}</span>
						<span class="text">获赞</span>
					</view>
				</view>
			</view>
			<view class="space">
				<!-- 我的提问 -->
				<view class="space-tabbar">
					<view class="space-top-content active">
						<i class="certishare-icon">
							<span>&#xe73f;</span>
						</i>
					</view>
				</view>
				<view
					class="show-space-contont"
					style="display: flex; flex-wrap: wrap; justify-content: center"
				>
					<CardVue
						v-for="(p, index) in cardData"
						:key="index"
						:cardData="p"
					></CardVue>
				</view>
			</view>
			<!-- <spaceInformationVue></spaceInformationVue> -->
		</view>
	</view>
</template>

<script>
import CardVue from '../../components/index/index_card/Card.vue';
import spaceInformationVue from '../../components/myCenter/space/space-information.vue';
import { mapState, mapMutations } from 'vuex';
import { getUserInfo, getUserCardList } from '../../common/api/find.js';
export default {
	data() {
		return {
			userInfoDatas: {},
			bgImageScale: 1, // 背景图放大比例，默认为1，不放大
			cardData: [],
			followedNum: ''
		};
	},
	computed: {
		//拿到存储在store的数据
		...mapState({
			loginStatus: (state) => state.user.loginStatus,
			userInfo: (state) => state.user.userInfo
		})
	},
	components: {
		spaceInformationVue,
		CardVue
	},
	methods: {
		...mapMutations(['updateUser']),
		back() {
			// uni.navigateBack();
			uni.navigateTo({
				url: '/pages/index/index'
			});
		},
		JumpToFollow() {
			const id = this.userInfo.id;
			uni.navigateTo({
				url: `/pages/follow/follow?id=${id}`
			});
		},
		getUserInfos() {
			//如果没登录就跳转到登录页面
			if (!this.$store.state.user.loginStatus) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				//登录了就进行一个数据的查
				const that = this;
				const uid = this.userInfo.uid;
				const _id = this.userInfo.id;
				const query = ['avatar', 'profileBackground', 'followersCount', 'followingCount', 'totalLikes', 'username', 'personSignature'];
				getUserInfo(uid, query)
					.then((responseData) => {
						//将获取到的新数据跟store的userInfo里面的数据合并
						this.userInfoDatas = responseData;
						this.followedNum = responseData.followingCount.length;
						//合并数据
						that.updateUser({ ...this.userInfo, ...responseData });
					})
					.catch((error) => {
						console.error('获取用户信息失败,', error);
					});
				getUserCardList(_id).then((res) => {
					// console.log(res);
					this.cardData = res;
				});
			}
		},
		toSeeting() {
			uni.navigateTo({
				url: '/pages/mySeeting/mySeeting'
			});
		}
	},
	onLoad(options) {
		console.log(options);
	},
	mounted() {
		// 在生命周期进来的时候查询用户的更多信息
		// 根据用户的uid来查询粉丝数量，关注数量，获赞数量和发布过的卡片的数量
		this.getUserInfos();
		// console.log(this.userInfo);
	},
	onScroll(e) {
		// 监听页面滚动事件，根据滚动距离来改变背景图的放大比例
		const { scrollTop } = e.detail;
		this.bgImageScale = 1 + scrollTop / 200; // 背景图放大比例根据需要调整，200为触发放大的滚动距离
	}
};
</script>

<style lang="scss">
.personal-center {
	width: 750rpx;
	.header {
		position: relative;
		height: 300px;
		.bg-image {
			width: 100%;
			height: 100%;
		}
		.userdata {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.name {
				font-family: 'Source Han Sans SC Bold';
				margin-top: 10px;
				color: rgba(255, 255, 255, 0.8);
				font-size: 18px;
			}
			.signature {
				margin-top: 10px;
				font-size: 14px;
				color: rgba(255, 245, 222, 1);
			}
		}
		.tools {
			width: 90%;
			position: absolute;
			display: flex;
			justify-content: space-between;
			top: 44px;
			left: 50%;
			color: #fff;
			transform: translate(-50%, -50%);
			mix-blend-mode: difference;
			i {
				font-size: 28px;
				font-weight: 700;
			}
		}
		.space-top {
			width: 85%;
			height: 50px;
			background-color: rgba(255, 255, 255, 0.4);
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translate(-50%, -100%);
			border-radius: 10px 10px 0 0;
			backdrop-filter: blur(5px);
			display: flex;
			justify-content: center;
			.space-top-statistics {
				width: 80%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.statistics {
					display: flex;
					flex-direction: column;
					align-items: center;
					span {
						font-size: 14px;
						color: #fff;
					}
				}
			}
		}
	}
	.space {
		width: 100%;
		.space-tabbar {
			width: 100%;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: center;
			.space-top-content {
				i {
					span {
						font-size: 32px;
						color: #000;
					}
				}
				span {
					font-size: 14px;
				}
			}
			.active {
				color: #fff;
				border-bottom: 2px solid #999;
			}
		}
	}
}
</style>
